<template>
  <yd-layout>
    <!-- 顶部导航 -->
    <yd-navbar slot="navbar" title="收银台" height=".88rem" bgcolor="#fff" color="#444" fontsize=".3rem">
      <yd-navbar-back-icon slot="left" color="#666" @click.native="$router.back()"></yd-navbar-back-icon>
    </yd-navbar>

    <div class="m-cart-order-pay-hd">
      <p>订单总金额</p>
      <em>￥{{orderDetail.PriceAddshipPrice | currency}}</em>
    </div>
    

    <yd-cell-group title="选择支付方式" class="m-cart-order-pay-type">
      <yd-cell-item type="radio">
        <span slot="left"><img src="../../assets/icon_alipay.png" />支付宝支付<em>推荐</em></span>
        <input slot="right" type="radio" value="h5_alipay" v-model="payType"/>
      </yd-cell-item>
      <yd-cell-item type="radio">
        <span slot="left"><img src="../../assets/icon_wechat.png" />微信支付</span>
        <input slot="right" type="radio" value="h5_wxpay" v-model="payType"/>
      </yd-cell-item>
    </yd-cell-group>

    <yd-button-group>
      <yd-button size="large" type="primary" @click.native="onToPay">确认支付</yd-button>
    </yd-button-group>

    <!-- 贷款支付协议弹窗 -->
    <yd-popup v-model="daikuanShow" position="center" width="80%" class="m-cart-pay-pop">
      <header>{{mattersInfo.title}}</header>
      <p class="ct" v-html="mattersInfo.content"></p>
      <div class="btn-group">
        <yd-button type="hollow" @click.native="daikuanShow = false">不同意并关闭</yd-button>
        <yd-button @click.native="onToLoan">同意并继续</yd-button>
      </div>
    </yd-popup>

    <div v-html="submitFormHtml"></div>
  </yd-layout>
</template>

<script>
  import { apiOrderDetail, apiOrderPay, apiLoanRegister, apiLoanProtocol } from 'js/api'
  import { mapGetters } from 'vuex'
  import { session } from 'util/storage'

  export default {
    data() {
      return {
        ids: '',
        payType: 'h5_alipay',
        submitFormHtml: '',
        orderDetail: {},
        daikuanShow: false,
        mattersInfo: {}
      }
    },
    created() {
      this.ids = this.$route.query.ids || ''
      // 获取主订单信息
      apiOrderDetail(this.token, this.ids).then(data => {
        this.orderDetail = data || {}
        if (!this.orderDetail.orderformMainId) {
          this.$toast('订单信息有误，请重新下单', () => {
            this.$router.back()
          })
          return
        }
        session.set('orderDetail', this.orderDetail)
      })
    },
    methods: {
      onToPay() {
        switch (this.payType) {
          case 'h5_alipay' || 'h5_wxpay':
            this._toPayByWxpayOrAlipay()
            break
          case 'h5_wxpay':
            this._toPayByWxpayOrAlipay()
            break
          case '1312':
            alert(1)
            break
          case 'daikuan':
            // 如果协议存在，则已经注册过了，不需要再调用接口
            this.mattersInfo = session.get('mattersInfo') || {}
            if (this.mattersInfo.title) {
              this.daikuanShow = true
            } else {
              apiLoanRegister(this.userName).then(data => {
                apiLoanProtocol().then(data2 => {
                  this.mattersInfo = data2 || {}
                  session.set('mattersInfo', this.mattersInfo)
                  this.daikuanShow = true
                })
              })
            }
            break
        }
      },
      onToLoan() {
        this.daikuanShow = false
        this.$toast('正在提交贷款...', () => {
          this.$router.replace('/cart/loan')
        })
      },
      // 微信和支付宝支付
      _toPayByWxpayOrAlipay() {
        apiOrderPay(this.token, this.payType, this.orderDetail.orderformMainId).then(data => {
          if (this.payType == 'h5_alipay') { // 支付宝支付
            this.submitFormHtml = (data || {}).orderString || ''
            this.$toast('正在提交支付...', () => {
              document.getElementsByTagName('form')[0].submit()
            })
          } else { // 微信支付
            this.$toast('暂时不支持微信支付，请选择支付宝支付', () => {
              this.payType = 'h5_alipay'
            }) 
          }
        })
      }
    },
    computed: {
      ...mapGetters(['token', 'userName'])
    }
  }
</script>

<style lang="scss">
  .m-cart-order-pay-hd {
    padding: .4rem 0;
    background: #fff;
    text-align: center;
    p {
      padding-bottom: .3rem;
      font-size: .3rem;
      color: #666;
    }
    em {
      font-size: .38rem;
      color: #f00384;
    }
  }

  .m-cart-order-pay-type {
    margin-top: .4rem;
    background: #fff;
    .yd-cell-title {
      border-bottom: 0;
    }
    img {
      display: inline-block;
      width: .5rem;
      height: .5rem;
      vertical-align: middle;
      margin-right: .2rem;
    }
    em {
      padding: .1rem .1rem .05rem .1rem;
      font-size: .2rem;
      background: #ff7d00;
      color: #fff;
      border-radius: 3px;
      margin-left: .1rem;
    }
  }

  .m-cart-pay-pop {
    header {
      padding: .3rem 0;
      text-align: center;
      font-size: .3rem;
      color: #666;
      border-bottom: 1px solid #eee;
    }
    .ct {
      padding: .3rem;
    }
    .btn-group {
      padding: .2rem 0;
      text-align: center;
      border-top: 1px solid #eee;
      .yd-btn {
        width: 1.5rem;
        &:first-child {
          margin-right: .4rem;
        }
      }
    }
  }
</style>